<template>
  <div id="room">
    <mu-container class="roomPaper">
      <mu-row>
        <mu-appbar class="roomAppBar" color="primary">
          <mu-icon value="whatshot" slot="left"></mu-icon>
          菜品列表
        </mu-appbar>
      </mu-row>
      <mu-row gutter>
        <mu-col xl="3" lg="4" md="6" sm="12" span="12" v-for="rt in dishList" :key="rt.dishId">
          <mu-card style=" margin: 10px auto;" raised>
            <!--<mu-card-header title="Myron Avatar" sub-title="sub title">-->
            <!--</mu-card-header>-->

            <!--<mu-card-title :title="rt.roomType" :sub-title="rt.remark"></mu-card-title>-->
            <mu-card-text>
              <mu-list id="dishDetail">
                <mu-list-item>
                    <span>

                      菜品ID:{{ rt.dishId }}
                    </span>

                </mu-list-item>
                <mu-divider></mu-divider>
                <mu-list-item>
                    <span>

                      菜品名称:{{ rt.dishName }}
                    </span>

                </mu-list-item>
                <mu-divider></mu-divider>
                <mu-list-item>
                     <span>

                      菜品价格：{{ rt.dishPrice }}
                    </span>

                </mu-list-item>

                <mu-list-item :ripple="true">

                  <mu-button color="primary" :disabled="rt.rest<=0" style="width: 50%" @click="book(rt.dishId)">下单
                  </mu-button>
                </mu-list-item>
              </mu-list>
              <!--<mu-card-actions>-->
              <!--<mu-button color="teal">剩余：30</mu-button>-->
              <!--<mu-button color="greenA700" @click="book(rt.typeId)">立即预订</mu-button>-->
              <!--</mu-card-actions>-->

            </mu-card-text>
          </mu-card>
        </mu-col>
      </mu-row>

    </mu-container>
  </div>
</template>

<script>
import {getAllDishesManager} from '@/api/dishManager'

export default {
  name: "Dish",
  data() {
    return {
      dishList: null,
    }
  },
  created: function () {
    this.fetchData()
  },
  methods: {
    navigateTo(val) {
      this.$toast.message("clicked!")
    },
    fetchData() {
      getAllDishesManager().then(res => {
        this.dishList = res.data;
      })
    },
    book(dishId) {
      this.$router.push({
        path: '/makeDish',
        name: 'MakeDish',
        params: {
          dishId: dishId
        }
      })
    }
  }
}
</script>

<style scoped>
#room {
  /*background-image: linear-gradient(270deg,#8146b4,#6990f6);*/
}

.mu-item, .mu-card-text {
  padding: 0;
}

.roomAppBar {
  /*position: -webkit-sticky;*/
  /*position: sticky;*/
  /*top: 0;*/
  /*z-index: 102;*/
  height: 40px;
  width: auto !important;
  border-radius: 30px;
  /*position: -webkit-sticky;*/
  /*position: sticky;*/
  /*top: 0;*/
  margin: 10px;
  /*background-color: #e91e63;*/
  color: #fff;
  padding: 10px;
}

.roomPaper {
  margin: 20px auto 0;
  padding: 20px 0;
}

#roomDetail span {
  flex: auto;
}

#roomDetail .mu-icon {
  vertical-align: bottom;
}

.mu-card-media img {
  height: inherit;
}
</style>
